import React from 'react'
import uuid from 'uuid'
import DataTable from '../../../share/DataTable'
import { initTable , buttonEdit, buttonAdd,checkRight } from '../../../public/js/public'
import ResetPwd from './ResetPwd'
import * as AlertUtil from '../../../public/js/alertUtil'
import *as FormUtil from '../../../public/js/formUtil'

export default class UserMain extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tableId : uuid.v4(),
            toolbarId : uuid.v4(),
            selectRowData : {},
            modalId: uuid.v4()
        }
    }

    componentDidMount() {
        this.initTable()
    }

    initTable() {
        let that = this, columns = [{
            title: 'ID',
            data: 'id'
        },{
            title: '登录帐号',
            data: 'username'
        }, {
            title: '昵称',
            data: 'nickname'
        }, {
            title: '性别',
            data: 'sex',
            render: (data,type,full,meta) => {
                if(data == 1) {
                    return "<span style='color:green'>男</span>"
                } else if(data == 2) {
                    return "<span style='color:red'>女</span>"
                } else {
                    return '未知'
                }
            }
        }, {
            title: '电话',
            data: 'phone'
        }, {
            title: '启用状态',
            data: 'enabled',
            render: (data,type,full, meta)=>{
                if(data == true) {
                    return "<span style='color:green'>启用</span>"
                } else {
                    return "<span style='color:red'>已停用</span>"
                }
            }
        }, {
            title : '操作',
            events : {
                'click .update' : (e, value, row) => {
                    let history = that.props.history
                    history.push('/system/user/edit/' + row['id'])
                },
                'click .changepwd': (e,value,row) => {
                    let newRowData = {}
                    Object.assign(newRowData, row)
                    that.setState({
                        selectRowData: newRowData
                    },()=>{
                        $('#' + that.state.modalId).modal('show')
                    })
                },

                'click .remove' : (e, value, row) => {
                    AlertUtil.confirm('删除提示','确定要删除该用户吗？！',()=>{
                        let url = domainName + "/users/" + row.id + "/delete", data = {}
                        FormUtil.submit(url, data, (response)=>{
                            AlertUtil.alert('提示','删除成功!',()=>{
                                $('#' + that.state.tableId).DataTable().ajax.reload()
                            });
                        })
                    })
                }
            },
            
            render(data, type, row, meta) {
                let edit = buttonEdit('back:user:update'),resetPwd = '',html = []
                if(checkRight('back:user:password')) {
                    resetPwd = '<a type="button" class="btn btn-xs waves-effect waves-light btn-info changepwd">重置密码</a>'
                }
                
                html.push('<div class="button-group">')
                html.push(edit)
                html.push(resetPwd)
                html.push('</div>')
                return html.join('')
            }
        }]

        const tableConfig = {
            columns:columns,
            ajax: domainName + "/users",
        }
        initTable({
            toolbarId :this.state.toolbarId,
            tableId: this.state.tableId,
            buttons : []
        },tableConfig)
    }

    render() {
        return (
            <div>
                <ResetPwd modalId={this.state.modalId} formData = {this.state.selectRowData}/>
                <DataTable>
                    <div id={this.state.toolbarId}>
                       {buttonAdd('back:user:update', '#/system/user/edit/')}
                    </div>
                    <table id={this.state.tableId} className="table table-striped table-bordered display"></table>
                </DataTable>
            </div>
        )
    }
}